<template>
  <div class="home">
    <el-row type="flex" justify="end" style="background-color: #fff;">
      <el-col style="text-align: right;">
        <div>
          <img class="c-image" src="../assets/img/min.png" alt="" @click="cMethodClickEvent(1)"/>
          <img class="c-image" src="../assets/img/max.png" alt="" @click="cMethodClickEvent(2)"/>
          <img class="c-image" src="../assets/img/close.png" alt="" @click="cMethodClickEvent(3)"/>
        </div>
      </el-col>
    </el-row>
    <div class="header">
      <section class="left" @click="logoutModalVisible = true;">
        <section class="trial">
          <h3>易企众,您好!</h3>
          <span>2020-09-01试用到期(剩余 5 天)</span>
        </section>
        <section class="vip">
          <span>升级会员</span>
        </section>
      </section>
      <section class="right">
        <div class="top">
          <section class="item">积分</section>
          <section class="item">奖励</section>
          <section class="item">提现</section>
        </div>
        <h3>一大波专属权益送给您!</h3>
      </section>
    </div>
    <el-row class="container">
      <el-col :span="10">
        <el-row>
          <el-col class="part recognize">
            <div class="title">风控识别</div>
            <el-row class="box-card" type="flex" align="middle">
              <el-col :span="8" class="left">
                <div class="upload-item">
                  <svg-icon icon-class="upload" />
                </div>
                <span>添加票据</span>
              </el-col>
              <el-col :span="16" class="right">
                <div class="item">
                  <div>张数：</div>
                  <div class="value">36</div>
                  <div>&nbsp;张</div>
                </div>
                <div class="item">
                  <div>总额：</div>
                  <div class="value">2.36789756</div>
                  <div>&nbsp;亿</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col class="part">
            <div class="title">
              <ul class="tabs">
                <li class="active">贴现日历</li>
                <li @click="calculateVisible = true;" class="calculate">贴现计算器</li>
              </ul>
            </div>
            <!-- <FullCalendar :options="calendarOptions" /> -->
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="14" class="part">
        <div class="title">
          <ul class="tabs">
            <li class="active">全部</li>
            <li>咨讯</li>
            <li>消息</li>
            <li>功能</li>
          </ul>
        </div>
        <div class="content">
          <!-- <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>-->
          <ul>
            <li v-for="o in 5" :key="o">
              <el-row>
                <el-col :span="21">
                  <div>
                    <span class="content-title">意外背锅！电票背书转走后被冻</span>
                    <div>
                      <time class="time">{{ currentDate }}</time>
                    </div>
                  </div>
                </el-col>
                <el-col :span="3">
                  <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    width="50"
                  />
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="logoutModalVisible"
      center
      :show-close="false"
      width="300px"
      class="user-dialog"
    >
      <div slot="title"></div>
      <el-row class="top">
        <el-col :span="16">
          <el-row>
            <el-col class="arp">易企众</el-col>
            <el-col>
              <el-row type="flex">
                <el-col class="label">企业号</el-col>
                <el-col class="value">319206</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row class="bottom">
        <el-col>
          <el-row type="flex">
            <el-col :span="8" class="lable">系统角色</el-col>
            <el-col :span="16" class="value">管理员/普通用户</el-col>
          </el-row>
        </el-col>
        <el-col style="margin: 20px 0;">
          <el-row type="flex">
            <el-col :span="8" class="lable">注册日期</el-col>
            <el-col :span="16" class="value">2020-12-20（389天）</el-col>
          </el-row>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="logout" style="width:100%;">登出</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="calculateVisible">
      <Calculate v-if="calculateVisible"></Calculate>
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import Calculate from "./dashboard/Calculate.vue";
import { fetchData } from "@/api";

export default {
  name: "dashboard",
  components: {
    // Swiper,
    // SwiperSlide,
    FullCalendar, // make the <FullCalendar> tag available
    Calculate
  },
  computed: {},
  data() {
    return {
      calculateVisible: false,
      logoutModalVisible: false,
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        locale: "zh-cn",
        headerToolbar: {
          left: "title",
          right: "prev,next today"
        },
        initialDate: "2020-01-12",
        buttonIcons: false, // show the prev/next text
        // weekNumbers: true,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        dayMaxEvents: true, // allow "more" link when too many events
        events: [
          {
            title: "1",
            start: "2020-01-01"
          },
          {
            title: "Long Event",
            start: "2020-01-07",
            end: "2020-01-10"
          },
          {
            groupId: 999,
            title: "Repeating Event",
            start: "2020-01-09T16:00:00"
          },
          {
            groupId: 999,
            title: "Repeating Event",
            start: "2020-01-16T16:00:00"
          },
          {
            title: "Conference",
            start: "2020-01-11",
            end: "2020-01-13"
          },
          {
            title: "Meeting",
            start: "2020-01-12T10:30:00",
            end: "2020-01-12T12:30:00"
          },
          {
            title: "Lunch",
            start: "2020-01-12T12:00:00"
          },
          {
            title: "Meeting",
            start: "2020-01-12T14:30:00"
          },
          {
            title: "Happy Hour",
            start: "2020-01-12T17:30:00"
          },
          {
            title: "Dinner",
            start: "2020-01-12T20:00:00"
          },
          {
            title: "Birthday Party",
            start: "2020-01-13T07:00:00"
          },
          {
            title: "Google",
            // url: "http://google.com/",
            start: "2020-01-28"
          }
        ]
      },
      currentDate: new Date(),
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      message: "first",
      showHeader: false,
      unread: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        },
        {
          date: "2018-04-19 21:00:00",
          title: "今晚12点整发大红包，先到先得"
        }
      ],
      read: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        }
      ],
      recycle: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        }
      ],
      bill1: [
        {
          date: "123",
          title: "承兑人",
          cdrqc: "南京中电熊猫贸易有限公司",
          khhmc: "中国工商银行新街口支行",
          khhhh: "5464596745335469"
        },
        {
          title: "出票人",
          cdrqc: "南京中电熊猫贸易有限公司",
          khhmc: "中国工商银行新街口支行",
          khhhh: "5464596745335469"
        },
        {
          title: "收款人",
          cdrqc: "南京中电熊猫贸易有限公司",
          khhmc: "中国工商银行新街口支行",
          khhhh: "5464596745335469"
        }
      ],
      bill2: [
        {
          title: "转让背书(可转让)",
          bsrqc: "南京中电熊猫贸易发展有限公司",
          bbsrmc: "深圳美好事业有限公司",
          bsrq: "2020年8月7日"
        },
        {
          title: "转让背书(可转让)",
          bsrqc: "深圳美好事业有限公司",
          bbsrmc: "南京宜企众信息科技有限公司",
          bsrq: "2020年8月7日"
        },
        {
          title: "转让背书(可转让)",
          bsrqc: "南京宜企众信息科技有限公司",
          bbsrmc: "中国农业银行南京仙林支行营业部",
          bsrq: "2020年8月7日"
        }
      ]
    };
  },
  created() {
    this.token = localStorage.getItem("ms_token");
    this.getData();
  },
  methods: {
    evalC(fn) {
      return new Function('return ' + fn)();
    },
    cMethodClickEvent(target) {
      const idx = [1,2,3].findIndex((item) => { return item == target});
      this.evalC(`window_external.setWindowSize(${idx}000, ${idx}000)`);
    },
    logout() {
      this.logoutModalVisible = false;
    },
    getData() {
      fetchData(this.query).then(res => {
        console.log(res);
        this.tableData = res.list;
        this.pageTotal = res.pageTotal || 50;
      });
    },
    test() {
      alert(123);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.c-image {
  margin: 10px 0 0 10px;
}
li {
  list-style: none;
}
$primary: #a3a0fb;
.home {
  .header {
    height: 100px;
    background-color: #fff;
    padding: 0 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
    .left {
      height: 100%;
      display: flex;
      align-items: center;
      .trial {
        margin-right: 20px;
        > h3 {
          color: #666666;
          font-size: 20px;
        }
        > span {
          font-size: 12px;
          color: #c53636;
        }
      }
      .vip {
        // align-self: flex-end;
        padding: 0 20px;
        border-radius: 14px;
        background: linear-gradient(129deg, #b18e52 0%, #d6bc95 100%);
      }
    }
  }
  .container {
    background-color: #F0F0F7;
    .part {
      .title {
        font-size: 18px;
        color: #000;
        font-weight: bold;
        border-left: 4px solid $primary;
        padding-left: 8px;
        margin: 10px 0;

        .tabs {
          display: flex;
          align-items: center;
          color: #999999;
          font-size: 14px;
          font-weight: 400;

          > li {
            margin-right: 30px;

            &.active {
              color: #000;
              font-size: 18px;
              font-weight: bold;
            }

            &.calculate {
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }

      .box-card {
        width: 320px;
        height: 145px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        background: #ffffff;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
        border-radius: 8px;
        font-size: 12px;
        color: #666666;
        .left {
          height: 90px;
          border-right: 1px solid #e7e7e7;
          text-align: center;
          .upload-item {
            margin: 10px auto;
            width: 50px;
            height: 50px;
            background: $primary;
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.04);
            border-radius: 8px;
          }
        }

        .right {
          padding-left: 10px;
          .item {
            display: flex;
            align-items: flex-end;
            .value {
              font-size: 20px;
              color: #7370df;
              text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
            }
          }
        }
      }

      .content {
        &-title {
          font-size: 18px;
          color: #333333;
        }
        .time {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}

.user-dialog {
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0 20px;
  }

  .arp {
    font-size: 16px;
    font-weight: bold;
    color: #7370df;
    margin-bottom: 10px;
  }
  .bottom {
    font-size: 14px;
    .lable {
      color: #999999;
    }
    .value {
      color: #333333;
    }
  }
}
.handle-input {
  width: 100%;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
  margin-top: 10px;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.pic-left {
  position: absolute;
  display: flex;
  width: 30%;
}

.text-right {
  float: right;
  width: 69%;
}

.text-top {
  float: top;
  display: flex;
  font-size: 15px;
  font-weight: bolder;
}

.text-bottom {
  float: bottom;
  display: flex;
  font-size: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto 2px auto 2px;
  width: 50px;
  height: 50px;
}

.total-left {
  position: absolute;
  float: left;
  display: flex;
}

.btn-right {
  float: right;
}

.total-top {
  float: top;
  display: flex;
  height: 50%;
}

/*.total-bottom {*/
/*    position: absolute;*/
/*    float: bottom;*/
/*    display: flex;*/
/*    height: 50%;*/
/*}*/

.total-number {
  font-size: 20px;
  font-weight: bolder;
  color: #7370df;
}

.comm-font {
  color: #999999;
  font-size: 12px;
}
.comm-font2 {
  color: #666666;
  font-size: 16px;
}
.comm-font3 {
  color: #7370df;
  font-size: 16px;
  font-weight: bolder;
}
.comm-font4 {
  color: #333333;
  font-size: 16px;
}

.comm-font5 {
  color: #c53636;
  font-size: 16px;
}
</style>
